<template>
	<view id="app">
		<!-- 新建地址 -->
		<view class="userdata area mt30 mlr30 plr25">
			<!-- 收货姓名 -->
			<view class="rows list ptb30 plr10">
				<view class="col f1">
					<input class="f30 c333" type="text" v-model="wrap.name" placeholder="收货姓名"
						placeholder-class="pls" />
				</view>
			</view>

			<!-- 联系电话 -->
			<view class="rows list ptb30 plr10">
				<view class="col f1">
					<input class="f30 c333" type="text" v-model="wrap.mobile" placeholder="联系电话"
						placeholder-class="pls" />
				</view>
			</view>

			<!-- 省市地 -->
			<picker mode="region" @change="selRegion" class="list">
				<view class="rows ptb30 plr10 f30">
					<view :class="wrap.area ? 'c333' : 'c999'">{{wrap.area ? wrap.area : '请选择地区'}}</view>
					<view class="icon">
						<uni-icons type="arrowright"></uni-icons>
					</view>
				</view>
			</picker>

			<!-- 详细地址 -->
			<view class="rows list ptb30 plr10">
				<view class="col f1">
					<input class="f30 c333" type="text" v-model="wrap.detail" placeholder="详细地址（如街道、小区、乡镇、村）"
						placeholder-class="pls" />
				</view>
			</view>

		</view>

		<!-- 保存 -->
		<view class="btn pay mt30 mlr30" @click="save">保存</view>
	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 用户信息
				wrap: {},
				// 修改的id
				id: '',
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断有无id 赋值修改id
			if (e.id) {
				that.id = e.id;

				// 获取地址详情
				that.address_detail();
			}
		},

		// 方法集
		methods: {
			// 获取地址详情
			address_detail() {
				// 请求接口 
				that.request({
					url: '/api/index/index',
					// 上传数据
					data: {
						// 表格
						table: 'user_address',
						// 地址id
						id: that.id,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值地址信息
							that.wrap = rs.data;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 保存
			save() {
				// 判断信息完整
				if (!that.wrap.name) {
					// 弹窗提示
					that.alert('请输入姓名');
					return;
				} else if (!that.wrap.mobile) {
					// 弹窗提示
					that.alert('请输入电话号码');
					return;
				} else if (!that.wrap.area) {
					// 弹窗提示
					that.alert('请选择省市地');
					return;
				} else if (!that.wrap.detail) {
					// 弹窗提示
					that.alert('请选择详细地址');
					return;
				}

				// 新建提交的对象
				var data = that.wrap;

				// 判断有无id 删除无用数据
				if (that.id) {
					data.tag ? delete data.tag : '';
					data.status ? delete data.status : '';
					data.createtime ? delete data.createtime : '';
					data.userData ? delete data.userData : '';
				};

				// 请求接口 
				that.request({
					url: '/api/user_Address/addAddress',
					// 上传数据
					data: data,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 弹窗提示
							that.alert('保存成功');

							// 半秒后执行
							setTimeout(() => {
								// 返回跳转
								uni.navigateBack();
							}, 500);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 选择地址
			selRegion(e) {
				// 赋值区
				that.wrap.area = e.detail.value.join(',');

				// 重新赋值刷新页面
				that.wrap = Object.assign({}, that.wrap);
			},
		},
	};
</script>
<style>
	/* 个人资料 */
	.userdata .list+.list {
		border-top: 1rpx solid #eee;
	}
</style>
